import { memo } from "react"
import styled from "@emotion/styled"
import { TypeBetRecordItem } from "../types/bet"
import { BetRecordItem } from "./BetRecordItem"
import { Virtuoso } from "react-virtuoso"
import { LoadSummary } from "@/pages/HomePage/components/LoadSummary"

interface BetRecordListProps {
    records: TypeBetRecordItem[]
    isLoading: boolean
    hasMore: boolean
    onLoadMore: () => void
}

const VirtuosoContainer = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
`

const ItemContainer = styled.div`
    padding: 0 0 8rem 0;
`

export const BetRecordList = memo(
    ({ records, isLoading, hasMore, onLoadMore }: BetRecordListProps) => {
        const loadMoreDebounced = () => {
            if (!hasMore) return
            if (isLoading) return
            onLoadMore()
        }

        return (
            <VirtuosoContainer>
                <Virtuoso
                    style={{ flex: 1 }}
                    data={records}
                    endReached={loadMoreDebounced}
                    components={{
                        Footer: () => (
                            <LoadSummary
                                count={records.length}
                                isLoading={isLoading}
                            />
                        ),
                    }}
                    itemContent={(index, record) => (
                        <ItemContainer>
                            <BetRecordItem
                                key={`${record.id}_${index}`}
                                record={record}
                            />
                        </ItemContainer>
                    )}
                />
            </VirtuosoContainer>
        )
    },
)
